<template>
    <div class="wrap">
         <van-nav-bar @click-left="onClickLeft" left-arrow left-text="返回" title="">
       
    </van-nav-bar>
        <van-form @submit="onSubmit">
            <van-field
                name="village"
                label="小区"
                readonly
                @click="vClick"
                :value="village"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择小区' }]"
            />
            <van-field
                name="lou"
                label="楼栋"
                readonly
                @click="louclick"
                :value="build"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择楼栋' }]"
            />
            <van-field
                name="house"
                label="房屋"
                readonly
                @click="houseClick"
                :value="house"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择房屋' }]"
            />
            <van-field
                name="owner"
                label="与屋主关系"
                readonly
                @click="ownerPicker=true"
                :value="ownerRelations"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择与屋主关系' }]"
            />
           <!-- <van-field name="radio" label="与屋主关系">
            <template #input>
                <van-radio-group v-model="ownerRelation" direction="horizontal">
                <van-radio name="1">业主</van-radio>
                <van-radio name="2">租客</van-radio>
                </van-radio-group>
            </template>
            </van-field> -->
            <div v-if="!hainfo&&!enter" style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                提交
                </van-button>
            </div>
            <div v-if="hainfo&&!enter" style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                更新
                </van-button>
            </div>
            
        </van-form>

       
        
       
      
        
         <van-popup v-model="ownerPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="ownerList"
                @confirm="ownerConfirm"
                @cancel="ownerPicker = false"
            />
        </van-popup>
         <van-popup v-model="housePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="houseList"
                @confirm="houseConfirm"
                @cancel="housePicker = false"
            />
        </van-popup>
        <van-popup v-model="louPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="louDongList"
                @confirm="louConfirm"
                @cancel="louPicker = false"
            />
        </van-popup>
        <van-popup v-model="villagePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="villageList"
                @confirm="villageConfirm"
                @cancel="villagePicker = false"
            />
        </van-popup>
     
      

       

        
       
        
    </div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/myvillage.js'
    export default {
        // 3- 4- 5-父母 6- 7- 10-儿媳 8- 9- 10-
        data: function () {
            return {
                enter:'',
                ownerList:[{
                    type:0,
                    text:"房主"  
                },{
                    type:1,
                    text:"配偶"  
                },{
                    type:2,
                    text:"子"  
                },{
                    type:3,
                    text:"女"  
                },{
                    type:4,
                    text:"孙子、孙女，或外孙子、外孙女"  
                },{
                    type:5,
                    text:"父母"  
                },{
                    type:6,
                    text:"祖父母或外祖父母"  
                },{
                    type:7,
                    text:"兄、弟、姐、妹"  
                },{
                    type:8,
                    text:"其他亲属"  
                },{
                    type:9,
                    text:"女婿"  
                },{
                    type:99,
                    text:"儿媳"  
                },{
                    type:99,
                    text:"租客"  
                }],
                ownerPicker:false,
                ownerRelation:'',
                houseList:[],
                house:'',
                houseId:'',
                housePicker:false,
                build:'',
                buildingId:'',
                louPicker:false,
                louDongList:[],
                hainfo:'',
                type:'',
                messaget:'',
                village:'',
                uploader:[],
                uploader1:[],
                uploader2:[],
                n_place:'',
                danPicker:false,
                fileList:[],
                fileList1:[],
                fileList2:[],
                communityId:'',
                brandPicker:false,
                bcolorPicker:false,
                ccolorPicker:false,
                ctypePicker:false,
                rightsPicker:false,
                villagePicker:false,
                onlinePicker:false,
                binPicker:false,
                zongPicker:false,
                mianPicker:false,
                villageList:[],               
                hunPicker:false,
                jiaoyuPicker:false,
                showCalendar:false,
                village:'',
                ownerRelations:'',
                form:{
                    zzmm:'',
                    activationCode:'',
                    "openId": "",
                    "name": "",
                    "communityId": "",
                    "pictureId": "",
                    "idCard": "",
                    "phone": "",
                    "sex": "",
                    "age": '',
                    "building": "",
                    "room": ""
                }
            }
        },
        components: {
           
        },
        created(){
            let that=this
           
            if(this.$route.query.id){
                that.hainfo=this.$route.query.id
                api.getHouse({openId:openid,id:that.$route.query.id}).then(e=>{
                    let obj=e.data
                    this.ownerRelations=that.ownerList.filter(item=>{
                        return item.type==obj.ownerRelation
                    })[0].text
                    console.log(this.ownerRelations)
                    this.ownerRelation=obj.ownerRelation
                    this.houseId=obj.houseId
                    this.house=obj.houseNo
                    this.buildingId=obj.buildNo
                    this.build=obj.buildNo
                    this.village=obj.communityName
                    this.communityId=obj.communityId
                    // buildNo: "1"
                    // buildingId: 1
                    // checkState: "0"
                    // communityId: 1
                    // communityName: "中国府"
                    // createTime: "2020-12-27T23:43:12"
                    // houseId: 1
                    // houseNo: "101"
                    // id: "1343220896387534848"
                    // openId: "oGory0YEx4FO3btkdPkixXMEV"
                    // ownerRelation: "0"
                }).catch(err=>{
                    console.log(err)
                })
            }
            this.getVillage()
            //this.getAccess()
            // let xiaoqu=this.$route.query.xiaoqu
            // this.form.village=xiaoqu
            // for(let i=0;i<xiaoquList.length;i++){
            //     if(xiaoqu==xiaoquList[i].type){
            //         document.title=xiaoquList[i].name+'小区信息录入'
            //     }
            // }
        },
        mounted() {
           
        },
        methods: {
             onClickLeft() {
               this.$router.go(-1)
            },
            houseClick(){
                if(this.houseList.length){
                    this.housePicker=true
                }else{
                   Toast("没有房屋信息") 
                }
            },
            louclick(){
                if(this.louDongList.length){
                    this.louPicker=true
                }else{
                    Toast("没有楼栋信息")
                }
            },
            vClick(){
                if(this.villageList.length){
                    this.villagePicker=true
                }else{
                    Toast("没有小区信息")
                }
                
            },
            ownerConfirm(val){
                this.ownerRelations=val.text
                this.ownerRelation=val.type
                this.ownerPicker=false
            },
            houseConfirm(val){
                this.houseId=val.id
                this.house=val.text
                this.housePicker=false
            },
            louConfirm(val){
                this.buildingId=val.id
                this.build=val.text
                this.louPicker=false
                this.getHouse()
            },
            getHouse(){
                let that=this 
                api.getHouseBy({id:that.buildingId}).then(e=>{
                    if(e.code==200){
                            that.houseList=e.data.map(item=>{
                                item.text=item.mph
                                return item
                            })
                            
                    }
                    
                    
                }).catch(err=>{
                    console.log(err)
                }) 
            },
            getLouDong(){
               let that=this 
               api.getLouDong({id:that.communityId}).then(e=>{
                   if(e.code==200){
                        that.louDongList=e.data.map(item=>{
                            item.text=item.ldh
                            return item
                        })
                        
                   }
                   
                  
               }).catch(err=>{
                   console.log(err)
               }) 
            },
            getVillage(){
               let that=this 
               api.getVillage().then(e=>{
                   if(e.code==200){
                        that.villageList=e.data.map(item=>{
                            item.text=item.name
                            return item
                        })
                        
                   }
                   
                  
               }).catch(err=>{
                   console.log(err)
               })
            },
            getInfo(){
                let that=this
                api.getInfo({openId:openid}).then(e=>{
                    if(e.code==200){
                        that.form=e.data
                        that.form.zzmm=Number(that.form.zzmm)
                        let obj={
                            url:e.data.picture.url
                        }
                        
                        if(e.data.pictureId){
                            that.uploader1.push(obj)
                        }
                        console.log('******')
                        console.log(that.uploader1)
                        // for(let i=0;i<that.villageList.length;i++){
                           
                        //     if(e.data.communityId===that.villageList[i].id){
                        //         that.village=that.villageList[i].name
                        //     }
                        // }
                    }
                }).catch(err=>{
                     console.log(err.response)
                })
                api.getOn({openId:openid}).then(e=>{
                   
                    if(e.code==200){
                        switch(Number(e.data)){
                            //0-未知 1-不允许 2-允许 3-失败
                            case 0:
                                that.messaget='未知'
                                break;
                            case 1:
                                that.messaget='不允许,请上传清晰照'
                                break;
                            case 2:
                                that.messaget='允许'
                                break;
                            case 3:
                                that.messaget='失败'
                                break;
                        }           
                    }
                }).catch(err=>{
                     
                     console.log(err.response)
                })
            },
            getAccess(){
                let url='http://api.weixin.qq.com/sns/oauth2/access_token?appid=wxf43b9ebf8b7e67cc&secret=SECRET&code=CODE&'+getQueryVariable('code')
                axios.get(url)
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            getOpenID(){
                let that=this
                let code=getQueryVariable('code')
              
                api.getOpenID({code}).then(e=>{
                    openid=e.data.data.openId
                    
                    setCookie('openid',openid,123)
                    that.getInfo()
                }).catch(err=>{
                   console.log(err.response.data)
                })
            },

            onReadd: function(file) {
                let that = this;
                Toast.loading({
                    duration:0,
                    message: '上传中...',
                    forbidClick: true,
                });
                let formData = new FormData();
               
               if(file.length){
                    for(let i=0;i<file.length;i++){
                        formData.append('files', file[0].file);
                    }
               }else{
                  formData.append('file', file.file); 
               }
               
                let config = {
                    headers: {
                        Authorization,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
               let id=this.form.pictureId?this.form.pictureId:1234
                axios.post(BASE+`/picture/uploadImg/${id}`, formData, config).then(res => {
                    if(res.data.code===200){
                       
                    Toast.clear()
                       Notify({ type: 'success', message: '上传成功' });
                        that.form.pictureId=res.data.data.id
                        
                    }else{
                       Notify({ type: 'warning', message: '上传失败' });
                    }
                }).catch(err=>{
                    Toast.clear()
                    that.uploader1=[]
                    Notify({ type: 'warning', message: '上传失败' });
                    console.log(err)
                });
            },
           
           
           
          
            villageConfirm(val){
                this.communityId=val.id
                this.village=val.text
                this.villagePicker=false
                this.getLouDong()
            },
            update(){
               let that=this
                let obj={
                    id:this.$route.query.id,
                   openId:openid,
                   communityId:this.communityId,
                   buildingId:this.buildingId,
                   houseId:this.houseId,
                   ownerRelation:this.ownerRelation
                }
                api.updatehouse(obj).then(e=>{
                Toast.clear()
                if(e.code===200){
                    that.$router.push('/myvillage')
                    Notify({ type: 'success', message: '录入成功' });
                }
            }).catch(err=>{
                Toast.clear()
                console.log()
            })
           },
          
           add(){
               let that=this
               let obj={
                   openId:openid,
                   communityId:this.communityId,
                   buildingId:this.buildingId,
                   houseId:this.houseId,
                   ownerRelation:this.ownerRelation
               }
                api.addNewguanlian(obj).then(e=>{
                Toast.clear()
                if(e.code===200){
                    Dialog.alert({
                        title: '提示',
                        message: '您的信息录入成功，请勿重复提交',
                    }).then(() => {
                        that.$router.push('/home')
                    });
                    Notify({ type: 'success', message: '录入成功' });
                }
            }).catch(err=>{
                Toast.clear()
                console.log()
            })
           },
           onSubmit(val){
               let that=this
                that.form.openId=openid
                Dialog.confirm({
                    title: '已确认提交？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    Toast.loading({
                        duration:0,
                        message: '系统正在采集信息',
                        forbidClick: true,
                    });
                    if(that.hainfo){
                        that.update()
                    }else{
                        that.add() 
                    }
                })
                .catch((err) => {
                    console.log(err)
                });
               
           }
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
  

</style>
